import Vue from 'vue'
import VueRouter from 'vue-router'
import HmLayout from '@/views/HmLayout.vue'
// import HmLogin from '@/views/HmLogin.vue'
// import HmRegister from '@/views/HmRegister.vue'
// import HmHome from '@/views/HmHome.vue'
// import HmCollection from '@/views/HmCollection.vue'
// import HmLike from '@/views/HmLike.vue'
// import HmMine from '@/views/HmMine.vue'
// import HmDetail from '@/views/HmDetail.vue'
// import HmNew from '@/views/HmNew.vue'
// import HmRecommend from '@/views/HmRecommend.vue'
import { getToken } from '@/utils/storage'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: HmLayout,
      redirect: '/login',
      children: [
        {
          path: 'home',
          component: () => import('@/views/HmHome.vue'),
          children: [
            { path: 'recommend', component: () => import('@/views/HmRecommend.vue') },
            { path: 'new', component: () => import('@/views/HmNew.vue') }
          ]
        },
        { path: 'collection', component: () => import('@/views/HmCollection.vue') },
        { path: 'like', component: () => import('@/views/HmLike.vue') },
        { path: 'mine', component: () => import('@/views/HmMine.vue') }
      ]
    },
    { path: '/register', component: () => import('@/views/HmRegister.vue') },
    { path: '/login', component: () => import('@/views/HmLogin.vue') },
    { path: '/detail/:id', component: () => import('@/views/HmDetail.vue') }
  ],
  linkActiveClass: 'active',
  linkExactActiveClass: 'ex-active'
})

// 白名单
const WHITE_LIST = ['/login', '/register']
// 路由全局前置守卫
router.beforeEach((to, from, next) => {
  if (getToken()) {
    next()
  } else {
    if (WHITE_LIST.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

export default router
